<template>
  <a-space direction="vertical" :style="{ width: '100%' }">
    <a-upload action="/api/upload/img" :headers="{ satoken: satoken }" :fileList="fileList" :show-file-list="false"
      @change="onChange" name="file">
      <template #upload-button>
        <div :class="`arco-upload-list-item${file && file.status === 'error'
            ? ' arco-upload-list-item-error'
            : ''
          }`">
          <div class="arco-upload-list-picture custom-upload-avatar" v-if="file.url">
            <img :style="`border-radius:${borderRadius}`" :src="file.url" />
            <div class="arco-upload-list-picture-mask">
              <IconEdit />
            </div>
            <a-progress v-if="file.status === 'uploading' && file.percent < 100" :percent="file.percent" type="circle"
              size="mini" :style="{
                  position: 'absolute',
                  left: '50%',
                  top: '50%',
                  transform: 'translateX(-50%) translateY(-50%)',
                }" />
          </div>
          <div class="arco-upload-picture-card" v-else>
            <div class="arco-upload-picture-card-text">
              <IconPlus />
              <div style="margin-top: 10px; font-weight: 600">Upload</div>
            </div>
          </div>
        </div>
      </template>
    </a-upload>
  </a-space>
</template>

<script>
import IconEdit from '@arco-design/web-vue/es/icon/icon-edit';
import IconPlus from '@arco-design/web-vue/es/icon/icon-plus';
export default {
  components: { IconPlus, IconEdit },
  props: {
    modelValue: {
      type: String,
      default: ''
    },
    borderRadius: {
      type: String,
      default: ''
    },
    callBack: {
      type: Function
    }
  },
  watch: {
    modelValue(newValue) {
      /**
       * 监听value的值的变化,响应式改变this.watchPropsValueObj对象
       */
      this.file.url = newValue;
    },
  },

  data() {
    return {
      fileList: [],
      satoken: localStorage.getItem('token'),
      file: { url: this.modelValue },
    };
  },
  methods: {
    /**
     * 图片上传
     */
    onChange(option) {
      this.file.value = option;
      if (option[option.length - 1].response) {
        const url = '/api' + option[option.length - 1].response.data.fileName;
        this.file.url = url
        console.log("props", this.modelValue);
        this.$emit('update:modelValue', this.file.url);
        //    console.log(flgg);
        console.log(this.callBack);
        if(this.callBack instanceof Function){
          this.callBack()
        }
      }
    },
  },
};
</script>

<style></style>